<template>
<view>
	<view class="account-top">
		<image class="headPhoto" mode="aspectFit" src="../../static/headPhoto.png"></image>
		<view class="account-name">{{this.username}}</view>
	</view>
	<view class="task">
		<view class="task-tip">已完成今日巡检任务{{task.schedule}}</view>
		<!-- 整个任务部分都在 task-header 中 -->
		<view class="task-header">
			<view class="task-name">
				<view style="width: 90%;">{{task.name}}</view>
				<uni-icons type="down" size="30" v-if="this.isTaskContentVisible === false" class="task-icon" @tap="toggleTaskContent"></uni-icons>
				<uni-icons type="up"  size="30" v-else class="task-icon" @tap="toggleTaskContent"></uni-icons>
			</view>
			
			
			<!-- 任务详细信息 -->
			<view class="task-details-wrapper" :class="{ 'expanded': isTaskContentVisible }">
				<view class="task-details">
					<view class="task-item">
						<view>任务状态：</view>
						<view>
							<view style="color: #0A60BD;" v-if="task.status == 0">处理中</view>
							<view style="color: red;"  v-else-if="task.status == 1">已超时</view>
							<view style="color: #4CAF50;"  v-else-if="task.status == 2">已完成</view>
							<view style="color: grey;"  v-else-if="task.status == 3">已取消</view>
							<view style="color: grey;" v-else-if="task.status == 4">未开始</view>
							<view v-else>未知状态</view>
						</view>
					</view>
					<view class="task-item">任务区域：{{task.mapName}}</view>
					<view class="task-item">任务进度：{{task.schedule}}</view>
					<view class="task-item">区&nbsp;&nbsp;&nbsp;域ID：{{task.mapId}}</view>
					<view class="task-item">开始时间：{{formatDate(task.startTime)}}</view>
					<view class="task-item" v-if="task.status == 2 && task.status !== null">完成时间：{{formatDate(task.finishTime)}}</view>
					<view class="task-item">限定完成时间：{{task.limitTime}}小时</view>
				</view>
			</view>
			
		</view>
		<view class="task-body">
			<view v-for="(inspectionData, index) in inspectionDatas" :key="index" class="task-content">
				<view class="task-left">
					<view class="task-name">{{inspectionData.inspectionDataName}}</view>
					<view class="task-item">检查项目：{{inspectionData.inspectionDataDesc}}</view>
					<view class="task-item">
						<view>任务状态：</view>
						<view>
							<view style="color: #0A60BD;"  v-if="inspectionData.inspectionDetailStatus === 0">处理中</view>
							<view style="color: red;"  v-else-if="inspectionData.inspectionDetailStatus === 1">已超时</view>
							<view style="color: #4CAF50;"  v-else-if="inspectionData.inspectionDetailStatus === 2">已完成</view>
							<view style="color: red;" v-else-if="inspectionData.inspectionDetailStatus === 4">有异常</view>
							<view style="color: grey;" v-else-if="inspectionData.inspectionDetailStatus === 6">未开始</view>
						</view>
						
					</view>
					<view class="task-item">任务机组：{{inspectionData.unitName}}</view>
					<view class="task-item">任务点位号：{{inspectionData.mapDetailId}}</view>
					<view class="task-item">任务点位描述：{{inspectionData.mapDetailDesc}}</view>
					<view class="task-item">任务评分：{{inspectionData.inspectionDetailScore}}</view>
				</view>
				<view v-if="locked[index] === false" class="task-right" @tap="goToTaskData(inspectionData)">已解锁></view>
				<view v-else class="task-right" @tap="toNFC(index)">去解锁></view>
			</view>
			<view class="tips">没有更多数据了</view>
		</view>
	</view>
</view>
</template>

<script>
import nfc from "@/common/nfc.js"
import request from "../../common/request.js"
export default {
	data() {
		return {
			username: '',
			userId:0,
			locked: [],
			message: "",
			task: {
				name: '',
				status: '',
				schedule: '',
				startTime: '',
				limitTime: '',
				finishTime: '',
				mapId: '',
				mapName: '',
				inspectionWorkId:1
				
			},
			isTaskContentVisible: false, // 控制任务信息显示的状态
			inspectionDatas: [],
		}
	},
	onLoad(options) {
		let userInfo = uni.getStorageSync('userInfo')
		this.username = userInfo.realName;
		this.userId = userInfo.userId;
		// 获取 URL 参数并赋值给 task 对象
		this.task.name = options.name || 'N/A';
		this.task.status = options.status || 'N/A';
		this.task.schedule = options.schedule || 'N/A';
		this.task.startTime = options.startTime || 'N/A';
		this.task.limitTime = options.limitTime || 'N/A';
		this.task.finishTime = options.finishTime || 'N/A';
		this.task.mapId = options.mapId || 'N/A';
		this.task.mapName = options.mapName || 'N/A';
		this.task.inspectionWorkId = options.inspectionWorkId || 'N/A';
		
		this.getInspectionDatas();
	},
	methods: {
		formatDate(dateString) {
			dateString = dateString.replace(" ", "+")
			const timestamp = Date.parse(dateString);
			
			if (isNaN(timestamp)) {
			  console.log("无效时间");
			  return "无效时间"
			} else {
			  const date = new Date(timestamp);
			  date.setMilliseconds(0);  // 精确到秒
			
			  // 获取年、月、日、时、分、秒
			  const offset = 8;
			  const year = date.getUTCFullYear();
			  const month = String(date.getUTCMonth() + 1).padStart(2, '0');  // 月份从0开始，所以加1
			  const day = String(date.getUTCDate()).padStart(2, '0');
			  const hours = String(date.getUTCHours()+offset).padStart(2, '0');
			  const minutes = String(date.getUTCMinutes()).padStart(2, '0');
			  const seconds = String(date.getUTCSeconds()).padStart(2, '0');
			
			  // 格式化为 `YYYY:MM:DD:HH:mm:ss`
			  const formattedDate = `${year}:${month}:${day} ${hours}:${minutes}:${seconds}`;
			  console.log(formattedDate);  // 输出：2024:10:12:14:00:01
			  return formattedDate
			}
		},
		toggleTaskContent() {
			this.isTaskContentVisible = !this.isTaskContentVisible;
		},
		goToTaskData(inspectionData) {
			console.log("进入TaskData")
			console.log(inspectionData)
			uni.navigateTo({
				url: '../tasks/taskData?inspectionData='+ encodeURIComponent(JSON.stringify(inspectionData))
			})
		},
		//读卡
		async toNFC(index) {
			//这里用异步获取读取到的NFC数据
			nfc.listenNFCStatus()
			await nfc.readData()
				  setTimeout(() => {
					console.log("nfc读取结果")
					console.log(nfc.readResult)
					if(nfc.readResult !== ""){
						console.log("nfc信息：")
						console.log(this.inspectionDatas[index].mapNfcMsg)
						if(nfc.readResult === this.inspectionDatas[index].mapNfcMsg){
							for(let i = 0; i < this.inspectionDatas.length;i++){
								if(this.inspectionDatas[i].mapNfcMsg === nfc.readResult){
									this.locked[i] = false
								}
							}
						}else{
							uni.showToast({
								title:"nfc信息不匹配",
								icon:'none'
							})
						}
					}else{
						uni.showToast({
							title:"读取失败，请重试",
							icon:'none',
						})
					}
						
				  }, 2000)	
			// this.locked[index] = false
			
		},
		getInspectionDatas(){
			console.log(this.task.inspectionWorkId+" "+this.userId)
			request(`/inspection/detail/${this.task.inspectionWorkId}/${this.userId}`).then(res=>{
				console.log("输出任务数据s")
				console.log(res)
				this.inspectionDatas = res.data.data
			})
		},
		//查看地图
		openMap(task){
			uni.navigateTo({
				url: `/pages/map/mapView/mapView?mapId=${this.task.mapId}`
			})
		}
	}
}
</script>

<style scoped>
	.account-top {
		background-color: white;
		height: 80px;
		display: flex;
		align-items: center;
		padding-left: 20px;
	}
	.headPhoto {
		width: 60px;
		height: 60px;
		margin-right: 20px;
	}
	.account-name {
		width: 50%;
		font-size: 30px;
	}
	.task-header {
		display: flex;
		flex-direction: column;
		align-items: left;
		background-color: #fff;
		padding: 20px;
		margin: 10px;
		border-radius: 20px;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15);
		cursor: pointer;
		transition: all 0.5s ease;
		/* 修改为 0.5s，与内容展开速度一致 */
	}

	.task-details-wrapper {
		overflow: hidden;
		transition: max-height 0.5s ease;
		/* 修改为 0.5s，与标题速度一致 */
		max-height: 0;
		/* 初始状态下内容不可见 */
	}

	.task-details-wrapper.expanded {
		max-height: 500px;
		/* 根据内容调整 */
	}

	.task-details {
		margin-top: 20px;
		/* 保证内容与标题有些间距 */
		font-size: 18px;
	}

	.task-item {
		margin-bottom: 10px;
		display: flex;
	}

	.task-tip {
		padding: 20px;
		padding-bottom: 2px;
	}

	.task-name {
		font-size: 25px;
		display: flex;
	}

	.task-body {}

	.task-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* 对齐任务内容的左右两侧 */
		padding: 20px;
		background-color: #fff;
		margin: 10px;
		border-radius: 20px;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15);
	}

	.task-left {
		flex: 1;
		/* 左侧部分占据剩余空间 */
	}

	.task-right {
		font-size: 20px;
		color: #4CAF50;
	}

	.view-map-btn {
		background-color: #0A60BD;
		color: white;
		padding: 10px 20px;
		text-align: center;
		border-radius: 15px;
		margin-top: 10px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.view-map-btn:hover {
		background-color: #45a049;
	}

	.tips {
		text-align: center;
		color: gray;
	}
</style>